<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				list-style: none;
			}
			
			nav {
				width: 100%;
				height: 80px;
				display: flex;
				background: red;
				justify-content: center;
			}
			
			.container {
				width: 1200px;
				margin: auto;
			}
			
			.navgation {
				height: 80px;
				width: 1200px;
				background: pink;
				display: flex;
				justify-content: space-between;
			}
			
			.logo {
				width: 145px;
				line-height: 80px;
				background: green;
				text-align: center;
			}
			
			.navgation>ul {
				display: flex;
				justify-content: space-between;
			}
			
			.navgation>ul>li {
				width: 121px;
				line-height: 80px;
				text-align: center;
				background: blue;
			}
			
			.banner {
				width: 100%;
				line-height: 473px;
				text-align: center;
				background: yellowgreen;
				font-size: 80px;
			}
			
			.one_top {
				width: 100%;
				line-height: 87px;
				background: orange;
				text-align: center;
				margin-bottom: 40px;
			}
			
			.one_bottom {
				display: flex;
				justify-content: space-between;
			}
			
			.one_bottom>div {
				margin-bottom: 50px;
			}
			
			.one_bottom_left {
				width: 415px;
				line-height: 533px;
				background: palevioletred;
				text-align: center;
			}
			
			.one_bottom_right {
				width: 610px;
				line-height: 533px;
				background: paleturquoise;
				text-align: center;
			}
			
			.section_one>.container {
				background: purple;
			}
			
			.section_one {
				margin-top: 50px;
			}
			
			.banner_two {
				line-height: 96px;
				width: 100%;
				text-align: center;
				background: brown;
				margin-top: 100px;
				font-size: 20px;
			}
			
			.two_top {
				width: 100%;
				line-height: 87px;
				background: aqua;
				text-align: center;
			}
			
			.two_bottom {
				display: flex;
				justify-content: space-around;
			}
			
			.two_bottom>div {
				width: 326px;
				line-height: 442px;
				background: darkcyan;
				margin-top: 40px;
				text-align: center;
				font-size: 50px;
			}
			
			.section_two {
				margin-top: 50px;
			}
			
			.section_three {
				margin-top: 108px;
			}
			
			.three_top {
				width: 100%;
				line-height: 87px;
				background: salmon;
				text-align: center;
				margin-bottom: 30px;
			}
			
			.three_bottom {
				display: flex;
				justify-content: space-between;
			}
			
			.three_bottom>div {
				width: 245px;
				line-height: 527px;
				background: gray;
				text-align: center;
				font-size: 30px;
			}
			
			.section_four {
				margin-top: 100px;
			}
			
			.four_top {
				width: 100%;
				line-height: 87px;
				background: chartreuse;
				text-align: center;
				margin-bottom: 30px;
			}
			
			.four_bottom {
				display: flex;
				justify-content: space-between;
			}
			
			.four_bottom_left {
				width: 664px;
				line-height: 346px;
				background: peru;
				font-size: 50px;
				text-align: center;
			}
			
			.four_bottom_right {
				width: 335px;
				height: 346px;
				background: slateblue;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}
			
			.four_bottom_right>div:nth-of-type(1) {
				width: 100%;
				line-height: 115px;
				background: darkslateblue;
				text-align: center;
			}
			
			.four_bottom_right>div:nth-of-type(2) {
				width: 100%;
				line-height: 115px;
				background: saddlebrown;
				text-align: center;
			}
			
			.four_bottom_right>div:nth-of-type(3) {
				width: 100%;
				line-height: 115px;
				background: darkturquoise;
				text-align: center;
			}
			
			.foot {
				margin-top: 30px;
			}
			
			.foot {
				background: darkslategrey;
			}
			
			.foot_main {
				margin: auto;
				height: 80px;
				width: 1200px;
				background: seagreen;
				display: flex;
				justify-content: space-between;
			}
			
			.foot_info {
				text-align: center;
				width: 615px;
				line-height: 80px;
				background: darkmagenta;
			}
			
			.tubiao {
				width: 97px;
				line-height: 80px;
				background: darkslateblue;
				text-align: center;
			}
		</style>
	</head>

	<body>
		<nav>
			<div class="navgation">
				<div class="logo">Logo</div>
				<ul>
					<li>首页</li>
					<li>关于我们</li>
					<li>产品介绍</li>
					<li>我们团队</li>
					<li>联系我们</li>
				</ul>
			</div>
		</nav>

		<div class="banner">Banner</div>

		<div class="section_one">
			<div class="container">
				<div class="one_top">
					关于我们
				</div>
				<div class="one_bottom">
					<div class="one_bottom_left">左边部分</div>
					<div class="one_bottom_right">右边部分</div>
				</div>
			</div>
		</div>

		<div class="banner_two">Banner_two</div>

		<div class="section_two">
			<div class="container">
				<div class="two_top">
					产品介绍
				</div>
				<div class="two_bottom">
					<div>产品1</div>
					<div>产品2</div>
					<div>产品3</div>
				</div>
			</div>
		</div>

		<div class="section_three">
			<div class="container">
				<div class="three_top">
					公司团队
				</div>

				<div class="three_bottom">
					<div>成员1</div>
					<div>成员2</div>
					<div>成员3</div>
					<div>成员4</div>
				</div>
			</div>
		</div>

		<div class="section_four">
			<div class="container">
				<div class="four_top">
					联系我们
				</div>

				<div class="four_bottom">
					<div class="four_bottom_left">地图</div>
					<div class="four_bottom_right">
						<div class="">小图标+文字</div>
						<div class="">小图标+文字</div>
						<div class="">小图标+文字</div>
					</div>
				</div>
			</div>
		</div>

		<div class="foot">
			<div class="foot_main">
				<div class="foot_info">foot的文字</div>
				<div class="tubiao">foot的图标</div>
			</div>
		</div>
	</body>

</html>